<template>
  <div class="my" v-if="userInfo">
  	<div class="my-header">
  		<router-link to="/my/userInfo" class="my-header-setting">
  			<div class="user-info">
					<div class="avatar">
						<img v-if="userInfo.avatarUrl != '' || userInfo.avatarUrl" width="60" height="60" :src="userInfo.avatarUrl" alt="">
						<img v-else width="60" height="60" src="./../../assets/images/df_user.jpg" alt="">
					</div>
					<div>
						<span class="user-name">{{ userInfo.userName ? userInfo.userName : userInfo.mobile  }}</span>
						<p class="address">
							{{ userInfo.address ? userInfo.address.province + userInfo.address.city + userInfo.address.county + userInfo.address.detailInfo: '暂无收货地址' }}<router-link :to="{ path: '/my/address' }" tag="em" class="edit-address  iconfont icon-bianji"></router-link></p>
					</div>		
				</div>
  		</router-link>
				
			<div class="my-header-bflex">
				<div class="t_Line"></div>
				<router-link class="bflex-item" :to="{ path: '/my/collect' }">
					<b>{{ collectLen }}</b>
					<span>我的收藏</span>
				</router-link>
				<div class="t_Line"></div>
				<router-link class="bflex-item" :to="{ path: '/my/message', query: { type: 'unread' } }">
					<b>{{ messageLen }}</b>
					<span>未读消息</span>
				</router-link>
			</div>
  	</div>
  	<div class="content">
  		<!-- 订单 -->
  		<div class="my-order">
  			<group gutter="0">
					<cell title="我的订单" value="全部订单" :link="{ path: '/my/order', query: { type: 0 } }" is-link>
						
					</cell>
  			</group>
  			<div class="floor order-container">
  				<router-link :to="{ path: '/my/order', query: { type: 1 } }" class="order-item">
  					<div class="icon">
  						<span class="iconfont">&#xe61d;</span>
  						<!-- <badge class="order-badge" text="0"></badge> -->
  					</div>
  					<h3>待付款</h3>
  				</router-link>
  				<router-link :to="{ path: '/my/order', query: { type: 2 } }" class="order-item">
  					<div class="icon">
  						<span class="iconfont">&#xe63c;</span>
  						<!-- <badge class="order-badge" text="0"></badge> -->
  					</div>
  					<h3>待发货</h3>
  				</router-link>
  				<router-link :to="{ path: '/my/order', query: { type: 3 } }" class="order-item">
  					<div class="icon">
  						<span class="iconfont">&#xe6b1;</span>
  						<!-- <badge class="order-badge" text="0"></badge> -->
  					</div>
  					<h3>待收货</h3>
  				</router-link>
  				<router-link :to="{ path: '/my/order', query: { type: 4 } }" class="order-item">
  					<div class="icon">
  						<span class="iconfont">&#xe60c;</span>
  						<!-- <badge class="order-badge" text="0"></badge> -->
  					</div>
  					<h3>待评价</h3>
  				</router-link>
  			</div>	
  		</div>
  		<split></split>
  	</div>
  	<div class="user-links-wrapper">
  		<group gutter="0" class="links-group">
				<cell title="我的收藏" is-link :link="{ path: '/my/collect' }">
					<span slot="icon" style="color: #ff774f" class="links-icon iconfont icon-shoucang"></span>
				</cell>
				<cell title="我的评价" is-link :link="{ path: '/my/assess' }">
					<span slot="icon" style="color: #f96cb8" class="links-icon iconfont icon-icon078"></span>
				</cell>
				<cell title="浏览历史" is-link :link="{ path: '/my/history' }">
					<span slot="icon" style="color: #05d978" class="links-icon iconfont icon-liulanjilu"></span>
				</cell>
				<cell title="地址管理" is-link :link="{ path: '/my/address' }">
					<span slot="icon" style="color: #fa2d67" class="links-icon iconfont icon-dizhi"></span>
				</cell>
			</group>
  	</div>
  	<div class="exit-btn">
			<six-button @click.native="loginout">
				<span class="six-icon"><x-icon type="android-person" size="20"></x-icon></span>
				<span>退出登录</span>
			</six-button>
		</div>
  	<!-- 底部导航 -->
    <footer-nav bottom-nav="我的" bg-color="#fff" text-color="#999" ></footer-nav>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'	
import { Group, Cell, Badge, XButton } from 'vux'
import { removeStore } from '@/utils/mUtils'
import http from '@/utils/http'
import FooterNav from '@/components/FooterNav'
import Split from '@/components/public/Split'

export default {
	components: {
		Group,
		Cell,
		Badge,
		FooterNav,
		Split
	},
	data () {
		return {
			messageLen: 0
		}
	},
	computed: {
		...mapGetters(['collectLen', 'userInfo'])
	},
	methods: {
		getUserInfo () {
			http.get('/api/v1/getUserInfo', {}, false, res => {
		    if (res.status == 1) {
		      this.$store.dispatch('saveUserInfo', res.userInfo)
		    }
		  })
		},
		getMessageLen () {
			http.get('/api/v1/getMessage', { type: 'unread' }, false, res => {
				if (res.status == 1) {
					this.messageLen = res.data.length
				}
			})
		},
		loginout () {
			var that = this;
			this.$vux.confirm.show({
				title: '提示信息',
        content: '确定要退出登录吗？',
        onConfirm () {
        	removeStore('token')
        	global.token = null
    			that.$store.state.user.userInfo = null
    			that.$store.state.cart.cartLen = 0
    			that.$router.push('/')
        }
			})
		}
	},
	mounted () {
		this.getMessageLen()
		this.getUserInfo()
	}
}
</script>

<style scoped>
.my-header {
	position: relative;
	padding: 20px 15px 0 15px;
	background: linear-gradient(120deg,#eb3c3c,#ff7459);
}
.my-header-setting {
	position: relative;
	display: block;
}
.my-header-setting svg {
	fill: #fff;
}
.user-info {
	display: flex;
	align-items: center;
}
.avatar {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
	box-shadow: 0 0 4px rgba(0,0,0, .2)
}
.user-name {
	flex: 1;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}
.address {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 18px;
	margin-top: 2px;
}
.address em {
	font-style: normal;
	font-size: 13px;
	display: inline-block;
	margin-left: 5px;
}
.my-header-bflex {
	display: flex;
	margin: 0 -15px;
	background: rgba(0, 0, 0, .1);
	margin-top: 15px;
}
.bflex-item {
	flex: 1;
	text-align: center;
	padding: 5px 0;
}
.bflex-item b,
.bflex-item span {
	display: block;
	color: #fff;
	line-height: normal;
}
.bflex-item span {
	font-size: 12px;
}
.bflex-item b {
	font-size: 16px;
	font-weight: bold;
}
.t_Line {
	flex: 0 0 1px;
	width: 1px;
	background: rgba(255, 255, 255, .1);
}
.my-order .iconfont,
.my-wallet .iconfont {
	font-size: 18px;
	margin-right: 5px;
}
.oder-icon {
	color: #f23030;
}
.order-container,
.wallet-container {
	display: flex;
	background: #fff;
	padding:  12px 0;
}
.order-item {
	flex: 1;
	text-align: center;
}
.order-item .icon {
	position: relative;
	display: inline-block;
}
.order-item .iconfont {
	font-size: 28px;
	color: #333;
	line-height: normal;
	background:linear-gradient(to right, #fe902e 20%, #e02e24);
	-webkit-background-clip:text;
	color:transparent;

}
.order-badge {
	position: absolute;
	right: -1px;
	top: -2px;
	font-size: 10px;
	text-align: center;
	line-height: 18px;
}
.order-item h3,
.wallet-item h3 {
	font-size: 12px;
	color: #4c4c4c;
	line-height: 14px;
	padding-top: 5px;
}
.wallet-icon {
	color: #e38000;
}
.wallet-item {
	flex: 1;
	text-align: center;
}
.wallet-item b {
	font-size: 16px;
	font-weight: bold;
	color: #f23030;
}
.links-group .weui-cells:after {
	display: none !important;
}
.links-icon {
	font-size: 20px;
	margin-right: 5px;
}
.exit-btn {
	padding: 10px 15px;
}
.exit-btn button {
	width: 100%;
	height: 42px;
	color: #666;
}
</style>
